<template>
    <div id="message">
        <el-table
                :data="serviceMessage"
                style="width: 100%">
            <el-table-column
                    prop="smMessage"
                    label="消息内容"
                    width="260">
            </el-table-column>
            <el-table-column
                    prop="smDatetime"
                    label="消息时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="smIfDealWith"
                    label="是否处理"
                    width="180">
                <template slot-scope="scope">
                    <span id="label" v-if="scope.row.smIfDealWith==1">已处理</span>
                    <el-button v-if="scope.row.smIfDealWith==0"
                            size="mini"
                            @click="processTheMessage(scope.row.smId,1)">处理消息</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

    export default {
        name: "ServiceMessage",
        data(){
            return{
                serviceMessage:{},
                buid:JSON.parse(sessionStorage.getItem("bid")),
                message:{
                    smId:null,
                    smIfDealWith:null,
                }
            }
        },
        mounted() {
            this.queryMessage()
        },
        methods:{
            processTheMessage(id,state){
                this.message.smId = id;
                this.message.smIfDealWith = state;
                this.$axios.post("/service/message/modify/message/state",this.message).then(result=>{
                    if (result.data>0){
                        this.$message({
                            message: '消息已处理!',
                            type: 'success'
                        });
                        this.queryMessage()
                    }else{
                        this.$message({
                            showClose: true,
                            message: '处理失败!',
                            type: 'error'
                        });
                    }
                })

            },
            queryMessage(){
                this.$axios.post("/service/message/query/message",this.buid).then(result=>{
                    this.serviceMessage = result.data
                })
            },
        }
    }
</script>

<style>
    #message{
        width: 78vw;
    }
    #label{
        font-family: 微软雅黑;
        font-size: 12px;
        color: #67c23a;
        border: 1px solid #e1f3d8;
        background-color: #f0f9eb;
        padding: 3px 15px 3px 15px;
        border-radius: 5px;
    }

</style>